<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>redio</title>
		<link rel="stylesheet" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css">
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<style>
		.lessonList ul li {
			border-bottom: 1px solid #eee;
		}
	</style>
	<body>
		<header class="aui-bar aui-bar-nav aui-bar-nav-search aui-text-default aui-background-transparent">
			<a class="aui-pull-left aui-btn" onclick="window.history.back()">
				<span class="aui-iconfont aui-icon-left aui-font-size-16 aui-font-weight"></span>
			</a>
			<div class="aui-title aui-text-white aui-font-size-14 aui-font-weight">新概念作文第一册</div>
			<a class="aui-pull-right aui-btn" onclick="">
				<img src="images/share.png" style="width: 1rem;"/>
			</a>
		</header>
		<div class='jAudio--player aui-content aui-position-ser-fixed aui-background-white'>
			<audio></audio>
			<div class='jAudio--ui'>
				<div class='jAudio--thumb'></div>
				<div class='jAudio--status-bar'>
					<div class='jAudio--details'></div>
					<div class='jAudio--volume-bar'></div>
					<div class='jAudio--progress-bar'>
						<div class='jAudio--progress-bar-wrapper'>
							<div class='jAudio--progress-bar-played'>
								<span class='jAudio--progress-bar-pointer'></span>
							</div>
						</div>
					</div>
					<div class='jAudio--time'>
						<span class='jAudio--time-elapsed'>00:00</span>
						<span class='jAudio--time-total'>00:00</span>
					</div>
				</div>
				<div class='jAudio--controls'>
					<ul>
						<li><button class='btn' data-action='prev' id='btn-prev'><span></span></button></li>
						<li><button class='btn' data-action='play' id='btn-play'><span></span></button></li>
						<li><button class='btn' data-action='next' id='btn-next'><span></span></button></li>
					</ul>
				</div>
			</div>
			<!--切换-->
			<div id="segmentedControl" class="aui-tab aui-segmented-control aui-border-bottom">
				<a class="aui-tab-item aui-font-size-14  aui-active" href="javascript:void 10 ">详情</a>
				<a class="aui-tab-item aui-font-size-14" href="javascript:void 10 ">讲师</a>
				<a class="aui-tab-item aui-font-size-14" href="javascript:void 10 ">评价 <span class="aui-font-size-12">(58)</span></a>
			</div>
			<div class="aui-position-relative">
				<!--详情-->
				<div id="item1" class="aui-tab-page">
					<div class="lessonList">
						<div>

						</div>
					</div>
				</div>
				<!--讲师-->
				<div class="aui-tab-page aui-hide">
					<!--<div class='jAudio--playlist'>
						</div>-->
					<div class="aui-teacher-content aui-font-size-12">
						<img src="images/teacher.jpg" class="aui-teacher-img" alt="" />
						<p class="aui-text-sblue aui-font-size-12 aui-margin-t-5">新东方 李悦老师</p>
						<p class="aui-font-size-12 aui-margin-b-10 aui-margin-t-5">8年教学经验</p>
						<div>
							我的名字是Samantha，我是一名来自美国的专业英语顾问， 拥有TESOL证书。我拥有生物医学、化学和管理的教育背景，并且自2009年以来一直是 iTutorGroup 的高级顾问。我有一个儿子，出生于2018年1月，从那时起我有了更加丰富的一对一教孩子的经验。 我喜欢寻找使课堂更有趣和让孩子们感到兴奋的方法。你们经常会在教室里看到我和我的宠物玩偶们！我坚信学习应该是一种有趣的体验，孩子越有兴趣 ，课程就越有成效。在业余时间，我喜欢烹饪和计划未来的家庭旅行，带我的孩子看这个世界！
						</div>
					</div>
				</div>
				<!--评价-->
				<div class="aui-tab-page aui-hide">
					<div class="lessonList preText">
						<ul>
							<li>
								<div class="aui-lesson-uint aui-clear-both aui-width-one" style="display: flex;">
									<img src="images/teacher.jpg" alt="" class="aui-user-write aui-pull-left" />
									<div class="aui-pull-left aui-width-one">
										<div class="aui-unit-title">听友15555555 </div>
										<div class="aui-font-size-12 aui-margin-b-5">2017-08-31</div>
										<div class="aui-font-size-12 aui-text-default">课程很满意，孩子听过之后有了很大的进步。课程很满意，孩子听过之后有了很大的进步。</div>
										<div class="aui-font-size-12 aui-clear-both aui-margin-t-10">
											18小时前
											<span class="aui-pull-right">
												<i class="aui-iconfont aui-icon-laud"></i> 10
											</span>
											<span class="aui-pull-right aui-margin-r-10">
												<i class="aui-iconfont aui-icon-comment"></i> 10
											</span>
										</div>
										<div class="aui-background-f6 aui-margin-t-5 aui-content-ask">
											<div class="aui-font-size-12 aui-text-default aui-margin-b-5">
												<span class="aui-text-sblue">用户123：</span>课程很满意，孩子听过之后有了很大的进步。课程很满意，孩子听过之后有了很大的进步。
											</div>
											<div class="aui-font-size-12 aui-text-default aui-margin-b-5">
												<span class="aui-text-sblue">用户dd：</span>课程很满意，孩子听过之后有了很大的进步。课程很满意，孩子听过之后有了很大的进步。
											</div>
											<div class="aui-font-size-12 aui-text-default aui-margin-b-5">
												<span class="aui-text-sblue">用户ee：</span>课程很满意，孩子听过之后有了很大的进步。课程很满意，孩子听过之后有了很大的进步。
											</div>
										</div>
									</div>
								</div>

							</li>
							<li>
								<div class="aui-lesson-uint aui-clear-both aui-width-one" style="display: flex;">
									<img src="images/teacher.jpg" alt="" class="aui-user-write aui-pull-left" />
									<div class="aui-pull-left aui-width-one">
										<div class="aui-unit-title aui-margin-b-5">听友15555555 </div>
										<div class="aui-font-size-12">5星</div>
										<div class="aui-font-size-12 aui-clear-both">
											18小时前
											<span class="aui-pull-right"><i class="aui-iconfont aui-icon-laud"></i>  10 </span>
											<span class="aui-pull-right aui-margin-r-10"><i class="aui-iconfont aui-icon-comment"></i> 10 </span>
										</div>
									</div>
								</div>

							</li>
							<li>
								<div class="aui-lesson-uint aui-clear-both aui-width-one" style="display: flex;">
									<img src="images/teacher.jpg" alt="" class="aui-user-write aui-pull-left" />
									<div class="aui-pull-left aui-width-one">
										<div class="aui-unit-title aui-margin-b-5">听友15555555 </div>
										<div class="aui-font-size-12">5星</div>
										<div class="aui-font-size-12 aui-clear-both">
											18小时前
											<span class="aui-pull-right"><i class="aui-iconfont aui-icon-laud"></i>  10 </span><span class="aui-pull-right aui-margin-r-10"><i class="aui-iconfont aui-icon-comment"></i> 10 </span>
										</div>
									</div>
								</div>

							</li>
							<li>
								<div class="aui-lesson-uint aui-clear-both aui-width-one" style="display: flex;">
									<img src="images/teacher.jpg" alt="" class="aui-user-write aui-pull-left" />
									<div class="aui-pull-left aui-width-one">
										<div class="aui-unit-title aui-margin-b-5">听友15555555 </div>
										<div class="aui-font-size-12">5星</div>
										<div class="aui-font-size-12 aui-clear-both">
											18小时前
											<span class="aui-pull-right"><i class="aui-iconfont aui-icon-laud"></i>  10 </span><span class="aui-pull-right aui-margin-r-10"><i class="aui-iconfont aui-icon-comment"></i> 10 </span>
										</div>
									</div>
								</div>

							</li>
							<li>
								<div class="aui-lesson-uint aui-clear-both aui-width-one" style="display: flex;">
									<img src="images/teacher.jpg" alt="" class="aui-user-write aui-pull-left" />
									<div class="aui-pull-left aui-width-one">
										<div class="aui-unit-title aui-margin-b-5">听友15555555 </div>
										<div class="aui-font-size-12">5星</div>
										<div class="aui-font-size-12 aui-clear-both">
											18小时前
											<span class="aui-pull-right"><i class="aui-iconfont aui-icon-laud"></i>  10 </span><span class="aui-pull-right aui-margin-r-10"><i class="aui-iconfont aui-icon-comment"></i> 10 </span>
										</div>
									</div>
								</div>

							</li>
							<li>
								<div class="aui-lesson-uint aui-clear-both aui-width-one" style="display: flex;">
									<img src="images/teacher.jpg" alt="" class="aui-user-write aui-pull-left" />
									<div class="aui-pull-left aui-width-one">
										<div class="aui-unit-title aui-margin-b-5">听友15555555 </div>
										<div class="aui-font-size-12">5星</div>
										<div class="aui-font-size-12 aui-clear-both">
											18小时前
											<span class="aui-pull-right"><i class="aui-iconfont aui-icon-laud"></i>  10 </span><span class="aui-pull-right aui-margin-r-10"><i class="aui-iconfont aui-icon-comment"></i> 10 </span>
										</div>
									</div>
								</div>

							</li>
							<li>
								<div class="aui-lesson-uint aui-clear-both aui-width-one" style="display: flex;">
									<img src="images/teacher.jpg" alt="" class="aui-user-write aui-pull-left" />
									<div class="aui-pull-left aui-width-one">
										<div class="aui-unit-title aui-margin-b-5">听友15555555 </div>
										<div class="aui-font-size-12">5星</div>
										<div class="aui-font-size-12 aui-clear-both">
											18小时前
											<span class="aui-pull-right"><i class="aui-iconfont aui-icon-laud"></i>  10 </span><span class="aui-pull-right aui-margin-r-10"><i class="aui-iconfont aui-icon-comment"></i> 10 </span>
										</div>
									</div>
								</div>

							</li>
							<li>
								<div class="aui-lesson-uint aui-clear-both aui-width-one" style="display: flex;">
									<img src="images/teacher.jpg" alt="" class="aui-user-write aui-pull-left" />
									<div class="aui-pull-left aui-width-one">
										<div class="aui-unit-title aui-margin-b-5">听友15555555 </div>
										<div class="aui-font-size-12">5星</div>
										<div class="aui-font-size-12 aui-clear-both">
											18小时前
											<span class="aui-pull-right"><i class="aui-iconfont aui-icon-laud"></i>  10 </span><span class="aui-pull-right aui-margin-r-10"><i class="aui-iconfont aui-icon-comment"></i> 10 </span>
										</div>
									</div>
								</div>

							</li>
							<li>
								<div class="aui-lesson-uint aui-clear-both aui-width-one" style="display: flex;">
									<img src="images/teacher.jpg" alt="" class="aui-user-write aui-pull-left" />
									<div class="aui-pull-left aui-width-one">
										<div class="aui-unit-title aui-margin-b-5">听友15555555 </div>
										<div class="aui-font-size-12">5星</div>
										<div class="aui-font-size-12 aui-clear-both">
											18小时前
											<span class="aui-pull-right"><i class="aui-iconfont aui-icon-laud"></i>  10 </span><span class="aui-pull-right aui-margin-r-10"><i class="aui-iconfont aui-icon-comment"></i> 10 </span>
										</div>
									</div>
								</div>

							</li>
							<li>
								<div class="aui-lesson-uint aui-clear-both aui-width-one" style="display: flex;">
									<img src="images/teacher.jpg" alt="" class="aui-user-write aui-pull-left" />
									<div class="aui-pull-left aui-width-one">
										<div class="aui-unit-title aui-margin-b-5">听友15555555 </div>
										<div class="aui-font-size-12">5星</div>
										<div class="aui-font-size-12 aui-clear-both">
											18小时前
											<span class="aui-pull-right"><i class="aui-iconfont aui-icon-laud"></i>  10 </span><span class="aui-pull-right aui-margin-r-10"><i class="aui-iconfont aui-icon-comment"></i> 10 </span>
										</div>
									</div>
								</div>
							</li>
						</ul>

					</div>

				</div>

			</div>
			<div class="aui-foot-height"></div>
			<div class="aui-position-fixed aui-fixed-write">
				<input type="text" placeholder="说点什么吧~" />
				<span class="aui-pl-btn">
					<i class="aui-iconfont aui-icon-comment aui-text-default"></i>
					<div>687</div>
				</span>
				<span>
					<i class="aui-iconfont aui-icon-like aui-text-default"></i>
					<div>999+</div>
				</span>
			</div>
			<div class="aui-text-show aui-hide">
			</div>
			<div class="aui-position-fixed aui-write-text aui-clear-both  aui-hide" style="z-index: 9;">
				<textarea name="" rows="" cols="" placeholder="说点什么吧~"></textarea>
				<button class="aui-pull-right send-text">发送</button>
			</div>
			<!--更多评论-->
			<div class="aui-more-pl aui-hide">
				<div class="aui-background-white aui-more-content">
					<h3 class="aui-text-center aui-border-b aui-padded-l-15 aui-padded-r-15 aui-font-size-14 aui-font-weight aui-padded-t-10 aui-padded-b-10">
						全部 243 条评论 <span class="aui-iconfont aui-icon-close aui-pull-right aui-font-weight aui-text-default"></span>
					</h3>
					<div class="lessonList preText  aui-padded-15 aui-padded-t-0">
						<ul>
							<li>
								<div class="aui-lesson-uint aui-clear-both aui-width-one" style="display: flex;">
									<img src="images/teacher.jpg" alt="" class="aui-user-write aui-pull-left" />
									<div class="aui-pull-left aui-width-one">
										<div class="aui-unit-title">听友15555555 </div>
										<div class="aui-font-size-12 aui-margin-b-5">2017-08-31</div>
										<div class="aui-font-size-12 aui-text-default">课程很满意，孩子听过之后有了很大的进步。课程很满意，孩子听过之后有了很大的进步。</div>
										<div class="aui-font-size-12 aui-clear-both aui-margin-t-10">
											18小时前
											<span class="aui-pull-right"><i class="aui-iconfont aui-icon-laud"></i>  10 </span><span class="aui-pull-right aui-margin-r-10"><i class="aui-iconfont aui-icon-comment"></i> 10 </span>
										</div>
										<div class="aui-background-f6 aui-margin-t-5 aui-content-ask">
											<div class="aui-font-size-12 aui-text-default">
												<span class="aui-text-sblue">用户123：</span>课程很满意，孩子听过之后有了很大的进步。课程很满意，孩子听过之后有了很大的进步。
											</div>
											<div class="aui-font-size-12 aui-text-default">
												<span class="aui-text-sblue">用户dd：</span>课程很满意，孩子听过之后有了很大的进步。课程很满意，孩子听过之后有了很大的进步。
											</div>
											<div class="aui-font-size-12 aui-text-default">
												<span class="aui-text-sblue">用户ee：</span>课程很满意，孩子听过之后有了很大的进步。课程很满意，孩子听过之后有了很大的进步。
											</div>
										</div>
									</div>
								</div>

							</li>
						</ul>
					</div>
				</div>

			</div>

		</div>

		<script src='js/jquery-1.7.2.min.js'></script>
		<script src='js/jaudio.js'></script>
		<script src="js/index.js"></script>
		<script>
			tabs(".aui-tab-item", ".aui-tab-page");
			$(window).scroll(function() {
				if($(this).scrollTop() >= 80) {
					$('#segmentedControl').addClass('fixed-top')
				} else {
					$('#segmentedControl').removeClass('fixed-top')
				}
			})
			$('.aui-fixed-write input').focus(function() {
				$('.aui-fixed-write').hide()
				$('.aui-text-show').show()
				$(this).blur()
				$('.aui-write-text').show()
				$('.aui-write-text textarea').focus()
				
			})
			$('.aui-text-show').click(function(e) {
				$(this).hide()
				$('.aui-write-text').hide()
				$('.aui-fixed-write').show()
			})
			$('body').on('click','.aui-icon-comment',function(){
				$('.aui-fixed-write input').focus()
			})
			//			评论内容	
			$('.send-text').click(function() {
					var texts = $('.aui-write-text textarea').val()
					if(texts == '') {
						alert('请输入内容')
						return false;
					}
					var html = '<li>\n' +
						'<div class="aui-lesson-uint aui-clear-both aui-width-one" style="display: flex;">\n' +
						'<img src="images/teacher.jpg" alt="" class="aui-user-write aui-pull-left"/>\n' +
						'<div class="aui-pull-left aui-width-one">\n' +
						'<div class="aui-unit-title aui-margin-b-5">听友15555555 </div>\n' +
						'<div class="aui-font-size-12 aui-text-default">\n' +
						texts +
						'</div>\n' +
						'<div class="aui-font-size-12 aui-clear-both aui-margin-t-10">刚刚\n' +
						'<span class="aui-pull-right"><i class="aui-iconfont aui-icon-laud"></i> 0</span><span class="aui-pull-right aui-margin-r-10"><i class="aui-iconfont aui-icon-comment"></i> 10 </span>\n' +
						'</div>\n' +
						'</div>\n' +
						'</div></li>'

					$('.preText ul').prepend($(html))
					$('.aui-text-show').hide()
					$('.aui-write-text').hide()
					$('.aui-fixed-write').show()
				})
				//			点击底部评论
			$('.aui-pl-btn').click(function() {
					$('.aui-more-pl').show()
				})
				//			关闭所有评论
			$('body').on('click', '.aui-icon-close', function() {
				$('.aui-more-pl').hide()
			})
		</script>
		<script>
			var t = {
				playlist: [{
					file: "tracks/01.mp3",
					thumb: "thumbs/01.jpg",
					trackName: "Dusk",
					trackArtist: "Tobu & Syndec",
					trackAlbum: "Single",
				}, {
					file: "tracks/02.mp3",
					thumb: "thumbs/02.jpg",
					trackName: "Blank",
					trackArtist: "Disfigure",
					trackAlbum: "Single",
				}, {
					file: "tracks/03.mp3",
					thumb: "thumbs/03.jpg",
					trackName: "Fade",
					trackArtist: "Alan Walker",
					trackAlbum: "Single",
				}],
				autoPlay: true
			}

			$(".jAudio--player").jAudio(t);
		</script>

	</body>

</html>